html,
body {
	padding: 0;
	margin: 0;
	width: 100%;
	/* height: 100%; */
}
@font-face {
	font-family: 'fzyt_GBK';
	src: url('../../../static/font/fzyt_GBK.ttf');
}
#app1{
	/* height: 100vh; */
	/* background-color: #1A1C27; */
}
.content {
	color: #FFFFFF;
	/* min-height: calc(100% - 73px); */
	/* height: 100vh; */
	padding-top: 131px;
	padding-bottom: 129px;
	padding-bottom: 74px;
	/* box-sizing: border-box; */
	background-color: #071724;
}

.my-chart {
	width: 375px;
	height: 220px;
}

/* 顶部折叠板，，今日交易信息统计 */
.trading-today {
	width: 100%;
	height: 131px;
	padding: 0 15px;
	padding-top: 25px;
	box-sizing: border-box;
	
	background-color: #202A33;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
}
.trading-today .collapse-area{
	height: 40px;
	font-size: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #202A33;
}
.trading-today .collapse-main{
	transform: translateX(-5px);
	position: relative;
}
.trading-today .collapse-main>div{
	line-height: 24px;
}
.trading-today .collapse-main::after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border-top: 6px solid #FFF;
	border-left: 4.5px solid rgba(0,0,0,0);
	border-right: 4.5px solid rgba(0,0,0,0);
	border-bottom: 6px solid rgba(0,0,0,0);
	position: absolute;
	right: -10px;
	top: 9px;
}

.trading-today .tradingInfo-area{
	display: flex;
	align-items: center;
}
.trading-today .tradingInfo-l{
	flex: 1;
}
.trading-today .title {
	font-size: 25px;
	color: #0DD4BB;
	font-family: 'fzyt_GBK';
	font-weight: bold;
	margin-bottom: 8px;
}
.trading-today .amount {
	font-size: 12px;
	color: #7592B4;
	font-family: 'fzyt_GBK';
}
.trading-today .ratio {
	color: #0DD4BB;
	margin-left: 8px;
}
.trading-today .tradingInfo-r{
	font-size: 12px;
	color: #7592B4;
	transform: scale(0.84);
	line-height: 20px;
}
.trading-today .tradingInfo-r span{
	color: #fff;
	margin-left: 10px;
}

/* 图表区域开始 */
.chart-tab {
}

.chart-tab .tab-area{
	width: 100vw;
	height: 46px;
	padding: 9px 16px;
	box-sizing: border-box;
	margin: 3px 0 7px 0;
	background-color: #202A33;
}
.chart-tab .tab-area .tab-wrapper {
	height: 26px;
	display: flex;
	border: 2px solid #0DD4BB;
	border-radius: 4px;
	font-size: 12px;
	text-align: center;
}

.chart-tab .tab-area .tab-item {
	width: 20%;
	line-height: 26px;
	box-sizing: border-box;
	border-right: 2px solid #0DD4BB;
	background-color: #202A33;
}

.chart-tab .tab-area .tab-item:nth-of-type(5) {
	border: none;
}

.chart-tab .tab-area .tab-item.active {
	background-color: #0DD4BB;
}

.chart-tab .chart-area {
	width: 100%;
	height: 297px;
	box-sizing: border-box;
	position: relative;
}
.chart-tab .chart-area .charts {
	/* 图表外容器 */
	width: 100%;
	height: 270px;
}
.chart-tab .chart-area .charts-label{
	position: absolute;
	left: 10px;
	top: 5px;
	font-size: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.chart-tab .chart-area .charts-bar-label{
	position: absolute;
	left: 10px;
	bottom: 5px;
	font-size: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.account-owner-benefits {
	width: 100%;
	height: 119px;
	background-color: #202A33;
	margin-top: 13px;
	box-sizing: border-box;
	padding: 15px 16px;
	display: flex;
	box-shadow: 0 2px 5px #000;
	display: none;
}

.account-owner-benefits .account-owner {
	width: 50%;
	font-size: 17px;
}

.account-owner-benefits .lower-level-benefits {
	width: 50%;
	font-size: 17px;
	color: #3365FF;
	text-align: right;
}

.account-owner-benefits .lower-level-benefits img {
	width: 17px;
	height: 17px;
	margin-left: 4.5px;
}

.account-owner-benefits .money-amount {
	margin-top: 20px;
}

.account-owner-benefits .money-amount .title {
	font-size: 12.5px;
	color: #B9B9BC;
}

.account-owner-benefits .money-amount .amount {
	font-size: 19px;
	color: #FF4545;
}

.account-owner-benefits .money-amount.left {
	border-right: 2px solid #474761;
}

.account-owner-benefits .money-amount.right {
	padding-left: 20px;
	text-align: center;
}

/* 委托订单  最新成交 */
.category-head{
	font-size: 12px;
	background-color: #202A33;
	margin-bottom: 1px;
}
.category-head-list, .category-head-under{
	width: 100vw;
	display: flex;
}
.category-head-list{
	height: 30px;
	align-items: center;
}
.category-head-item{
	color: #6D89A9;
	width: 50vw;
	text-align: center;
}
.category-head-item.active{
	color: #0DD4BB;
}
.category-head-under{
	height: 1px;
}
.category-underL{
	width: 50vw;
	height: 1px;
}
.category-underL span{
	display: block;
	width: 25px;
	height: 1px;
	margin-left: calc(25vw - 12.5px);
	background-color: #202A33;
}
.category-underL span.active{
	background-color: #0DD4BB;
}

.category-main{
	padding: 10px 15px;
	font-size: 12px;
	background-color: #202A33;
}
.depth-head{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.depth-head-left{
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.depth-head-center{
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.depth-head-right{
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.depth-head-label{
	/* font-size: 8px; */
	transform: scale(0.68);
	color: #7592B4
}
.depth-head-left-index{
	width: 30px;
	margin-right: 10px;
	text-align: left;
}
.depth-head-right-index{
	width: 30px;
	margin-left: 10px;
	text-align: right;
}
.depth-main{
	margin-top: 5px;
	display: flex;
	flex-direction: row;
}
.depth-main-item{
	flex: 1;
}
.dmi-cell{
	position: relative;
	height: 30px;
	display: flex;
	flex-direction: row;
}
.dmi-cell-item{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.dmi-cell-item-right{
	justify-content: flex-end;
}
.dmi-cell-bg{
	background-color: red;
	width: 0;
	height: 100%;
}
.dmi-cell-index{
	width: 30px;
	color: #7592B4;
	transform: scale(0.84);
}
.dmi-cell-num{
	flex: 1;
	margin: 0 10px;
	transform: scale(0.84);
	color: #fff;
}
.dmi-cell-price{
	transform: scale(0.84);
	color: #0DD4BB;
}
.dmi-cell-price-sell{
	transform: scale(0.84);
	color: #FF0600;
}

.depth-main>div{
	width: 100%;
}
.depth-main-listItem{
	width: 100%;
	height: 14px;
	margin-bottom: 13px;
	display: flex;
	justify-content: space-between;
}
.dmli-left{
	transform: scale(0.84);
	transform-origin: 20% 50%;
	flex: 1;
	color: #7592B4;
}
.dmli-center{
	transform: scale(0.84);
	flex: 1;
	text-align: center;
}
.dmli-right{
	transform: scale(0.84);
	flex: 1;
	text-align: right;
}
/*  */

.btn-wrapper{
	width: 100vw;
	height: 74px;
	background-color: #071724;
	position: fixed;
	bottom: 55px;
	bottom: 0px;
	left: 0;
	z-index: 3;
}
.btn-group {
	padding: 15px 0;
	display: flex;
	justify-content: center;
	background-color: #202A33;
}

.btn-group button {
	width: 40%;
	height: 40px;
	line-height: 40px;
	border-radius: 4px;
	font-size: 16px;
	color: #FFFFFF;
	padding: 0;
	margin: 0 14px;
	outline: none;
	border: none;
}


/* 下单弹框------ */
.mask {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 497.5px;
	/* height: 550px; */
	color: #FFFFFF;
	background-color: #212431;
	background-color: rgba(33, 36, 49, 0.9);
	display: none;
}

.mask .exchangeRate-area {
	padding: 0 15px;
	height: 42.5px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.mask .exchangeRate-area img {
	width: 20px;
	height: 19px;
}

.mask .orderAmount-area {
	margin-top: 13px;
	margin: 13px 12.5px 0;
	width: 350px;
	width: 93%;
	height: 84px;
	background-color: #212431;
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: center;
	box-shadow: 0 2px 5px #000;
}

.mask .orderAmount-area .amount-item {
	width: 15%;
	height: 28px;
	line-height: 28px;
	text-align: center;
	font-size: 12px;
	margin: 2.5px 5%;
	border-radius: 4px;

}

.mask .orderAmount-area .amount-item.active {
	background-color: #3365FF;
}

.mask .title {
	height: 40px;
	line-height: 40px;
	font-size: 15.6px;
	text-align: center;
}

.mask button.diy-btn {
	width: 93%;
	height: 32px;
	line-height: 32px;
	padding: 0;
	color: #FFFFFF;
	font-size: 15.5px;
	margin: 13px 3.5% 10px;
	border: none;
	border-radius: 4px;
}

.mask .info-display-area {
	width: 93%;
	/* height: 184.5px; */
	margin: 0 auto;
	padding-top: 10px;
	box-sizing: border-box;
	background-color: #212431;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 12.5px;
	line-height: 32.5px;
	box-shadow: 0 2px 5px #000;
}

.mask .info-display-area .info-top-diy {
	width: 75%;
	margin: 10px auto 0;
	display: flex;
	align-items: center;
}

.mask .info-display-area .info-top-diy input {
	width: 186px;
	height: 21px;
	box-sizing: border-box;
	padding: 0 5px;
	font-size: 12.5px;
	border: 1px solid #3365FF;
	border-radius: 4px;
	margin-right: 6.5px;
	outline: none;
	color: #fff;
	background-color: rgba(0, 0, 0, 0);
}

.mask .info-display-area .info-left {
	width: 35%;
	margin-right: 10%;
}

.mask .info-display-area .info-right {
	width: 30%;
}

.mask .info-display-area .confrim-btn {
	width: 242px;
	height: 33.5px;
	line-height: 33.5px;
	padding: 0;
	color: #FFFFFF;
	font-size: 15.5px;
	margin: 20px 0 30px;
	border: none;
	outline: none;
	border-radius: 4px;
}

.redF {
	color: #FF0600;
}

.greenF {
	color: #0DD4BB;
}

.redB {
	background-color: #C9302C;
}

.greenB {
	background-color: #0DD4BB;
}



/* 底部导航 */
.container{
	display: none;
}
.app-tabbar {
	width: 100vw;
	height: 55px;
	padding: 9px 40px 7px;
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	background: #202A33;
	box-shadow: 0px -2px 2px rgba(0,0,0,0.2);
}

.app-tabbar .tabbar-item {
	/* //这里有一处坑，若不不设置他的层级变大的话 */
	/* //你是点不到这个item按钮的，当然也不会产生触碰事件 */
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: 12px;
	color: #b1b1b1;
	/* width: 25vw; */
}
.app-tabbar .tabbar-item a{
	transform: scale(0.92);
}

.app-tabbar .icon {
	width: 20px;
	height: 20px;
	/* width: 0.05%; */
	/* height: auto; */
	margin-bottom: 4px;
	background-color: #fff;
}

.app-tabbar .icon.icon-home {
	background: url('../img/tab-bar-home-l.png') no-repeat;
	background-size: 100% 100%;
}

.app-tabbar .icon.icon-invitate {
	background: url('../img/tab-bar-invite.png') no-repeat;
	background-size: 100% 100%;
}

.app-tabbar .icon.icon-team {
	background: url('../img/tab-bar-team.png') no-repeat;
	background-size: 100% 100%;
}

.app-tabbar .icon.icon-user {
	background: url('../img/tab-bar-user.png') no-repeat;
	background-size: 100% 100%;
}

.app-tabbar .icon.active.icon-home {
	background: url('../img/tab-bar-home-l.png') no-repeat;
	background-size: 100% 100%;
}

.app-tabbar .icon.active.icon-invitate {
	background: url('../img/tab-bar-invite.png') no-repeat;
	background-size: 100% 100%;
}

.app-tabbar .icon.active.icon-team {
	background: url('../img/tab-bar-team.png') no-repeat;
	background-size: 100% 100%;
}

.app-tabbar .icon.active.icon-user {
	background: url('../img/tab-bar-user.png') no-repeat;
	background-size: 100% 100%;
}
